<template>
  <div class="login">
    <div class="cover"></div>
    <div class="login-box">
      <li>
        <input required v-model="loginForm.username" />
        <label>用户名</label>
      </li>
      <li>
        <input required type="password" v-model="loginForm.password" />
        <label>密码</label>
      </li>
      <button @click="login" class="btn">登陆</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, nextTick } from "vue"
import request from "@/utils/request"
import useUserStore from "@/store/modules/user"

import router from "@/router"

const userStore = useUserStore();

const loginForm = ref({
  username: "admin",
  password: "123456",
});




const login = async () => {
  // 处理登录逻辑
  await request.post<Token>("/auth/login", loginForm.value).then(async (res) => {
    if (res.data) {
      userStore.accessToken = res.data.access_token
      userStore.refreshToken = res.data.refresh_token
      await nextTick()
      router.push({
        path: "/",
      })
    }
  })
}
</script>

<style scoped lang="less">
.login {
  width: 100vw;
  height: 100vh;
  background: url(https://cn.bing.com//th?id=OHR.SeaNettles_ZH-CN1735729435_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp) no-repeat;
  // background:url(https://picsum.photos/1920/1080) no-repeat;
  background-size: cover;
  position: relative;
  box-sizing: border-box;

  .cover {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    filter: blur(20px);
    z-index: 1;
    // backdrop-filter: blur(1px);
  }

  .login-box {
    width: 400px;
    padding: 20px;
    border-radius: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);

    li {
      list-style: none;
      position: relative;
      margin-bottom: 20px;
      padding: 10px 0;
      overflow: hidden;

      label {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        transition: all 0.5s;
      }

      input {
        display: flex;
        width: 100%;
        height: 40px;
        outline: none;
        border: 0;
        padding-left: 20px;
        background: transparent;
        color: #fff;
        border-bottom: 2px solid #ccc;
        position: relative;

        &:valid~label,
        &:focus~label {
          transform: translate(-20px, -33px);
          font-size: 12px;
        }
      }
    }

    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 200px;
      height: 40px;
      outline: none;
      border: 0;
      margin: 0 auto;
      cursor: pointer;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.2);
      color: #fff;
    }
  }
}
</style>
